<template>
  <div id="desktop" :style="desktopStyle" v-show="!isChanging">
    <div class="icons-area flex-col flex-wrap">
      <DesktopIcon :app="app" v-for="app in appList" :key="app.appID"/>
    </div>
    <div class="statusBar">
      <StatusBar/>
    </div>
  </div>
</template>

<script>
import StatusBar from "@/layouts/desktop/StatusBar"
import DesktopIcon from "@/layouts/desktop/DesktopIcon"

export default {
  name: "Desktop",
  components: {DesktopIcon, StatusBar},
  data: () => ({
    isChanging: false,
    backgroundSize: "cover"
  }),
  watch:{
    [`$store.state.config.desktopImg`](){
      this.isChanging = true
      this.backgroundSize = ""
      this.$msg.info("背景图片加载中", {duration: 5000})
      setTimeout(()=>{
        this.isChanging = false
        this.backgroundSize = "cover"

      }, 3000)
    }
  },
  computed: {
    desktopStyle() {
      return {
        background: `url('${this.$store.state.config.desktopImg}') no-repeat`,
        backgroundSize: this.backgroundSize,
        backgroundPosition: "center"
      }
    },
    appList() {
      return this.$store.state.appList.filter(item => !item.hide)
    }
  },
  methods:{

  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var.scss";

#desktop {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.statusBar{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
}
.icons-area{
  height: 100%;
  align-content: start;
}
</style>
